<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 董哥
  Date: 2020/6/8
  Time: 17:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		
		<script type="text/javascript">
			function showLi(obj) {
			    $(obj).addClass('on').siblings().removeClass('on');
			    var index = $(obj).index();
			    //console.log($(obj).parent().parent())io
			    $(obj).parent().parent().find('.content li').hide();
			    $(obj).parent().parent().find('.content li:eq(' + index + ')').show();
			}
			
			function showPanal1(obj) {
			    $(obj).addClass('bag').siblings().removeClass('bag');
			    var _index = $(obj).index();
			    $('.panal').eq(_index).show('fast').siblings().hide('fast');
			}
		</script>
		
		<link rel="stylesheet" type="text/css" href="css/search-form.css"/>
		
		<style type="text/css">
			* {
				margin:0;
				padding:0;
				list-style:none;
			}
			body {
				font-size:12px;
				color:#666;
				text-align:left;
				background:#f0f0f0;
			}
			h1 {
				text-align:center;
			}
			.bag {
				background:#6E89BF;
				
			}
			.bag .baga{
				color: white;
			}
			.panal {
				width:1250px;
/*				height:520px;*/
	
				background:#f0f0f0;
				float:left;
				display:none;
			}
			.panal .tab {
				overflow:hidden;
				background:gainsboro;
			}
			.panal .tab a {
				display:block;
				padding:10px 20px;
				float:left;
				text-decoration:none;
				color:#333;
			}
			.panal .tab a:hover {
				background:gray;
				color:pink;
				text-decoration:none;
			}
			.panal .tab a.on {
				background:gray;
				text-decoration:none;
				color:white;
			}
			.panal .content {
				overflow:hidden;
				padding:10px;
			}
			.panal .content li {
				display:none;
			}
			/*arcile*/
						
			.comma {
				background:#f2f2f2;
			}
			.arcile {
				width:220px;
				height:700px;
				background:gainsboro;
				float:left;
				text-align:center;
				padding:10px 0;
			}
			.welcome{
				height: 70px;
				line-height: 70px;
				color: blue;
			}
			.info-ul>ul li {
				list-style:none;
				line-height:20px;
				float:left;
				margin:10px 0 0 15%;
			}
			.info-img {
				width:50%;
				padding:5px;
				background:white;
				margin:22%;
			}
			.info-meu>ul li a {
				text-decoration:none;
				line-height:40px;
				width:100%;
				color:black;
			}
		
		
		</style>
		
			 
			 <script >
			 	$(document).ready(function(){ //这个就是传说的ready   
			 		
				    $(".altrowstable tr").mouseover(function(){    
				       //如果鼠标移到class为stripe的表格的tr上时，执行函数    
				      $(this).addClass("over");}).mouseout(function(){    
				            //给这行添加class值为over，并且当鼠标一出该行时执行函数    
				            $(this).removeClass("over");}) //移除该行的class    
				  $(".altrowstable tr:even").addClass("alt");    
				    //给class为stripe的表格的偶数行添加class值为alt 
				    //www.divcss5.com 整理特效 
				  });   
			 </script>
			 
			 
			<!-- CSS goes in the document HEAD or added to your external stylesheet -->
			<style type="text/css">
				body{
					background-size: 100% auto;
				}
				.search{
					/*display: float;
					float: right;*/
					width: 100%;
					height: 40px;
				}
				.searchitem{
					display: float;
					float: right;
				}
				table.altrowstable {
					margin-top: 5px;
				    /*font-family: verdana,arial,sans-serif;*/
				    font-size:14px;
				    color:#333333;
				    /*border-width: 1px;*/
				    /*border-color: #a9c6c9;*/
				    /*border-collapse: collapse;*/
				    
				    text-align: center;
				}
				table.altrowstable th {
					width: 150px;
				    height: 50px;
				    /*border-width: 1px;*/
				    /*padding: 8px;*/
				    /*border-style: solid;*/
				    /*border-color: #1C428D;*/
				    background: #6E89BF;
				    color: white;
				}
				table.altrowstable td {
					width: 150px;
				    height: 50px;
				    /*border-width: 1px;*/
				    /*padding: 8px;*/
				    /*border-style: solid;*/
				    /*border-color: #a9c6c9;*/
				}
				.oddrowcolor{
				    background-color:#F0F0F0;
				}
				.evenrowcolor{
				    background-color:#E6E6E6;
				}
				table img{
					width: 25px;
					height: 25px;
				}
				
				table.altrowstable tr td{ background:#FFF;vertical-align:middle;} 
				/* css注释：默认css背景被白色 */ 
				table.altrowstable tr.alt td { background:#EEECEB;} 
				/* css 注释：默认隔行背景颜色 */
					
				table.altrowstable tr.over td {background:#E6E6E6;} 
				/* css注释：鼠标经过时候背景颜色 */ 
				
				/*第一个tab结束*/	
			</style>
			
			
			
			<!--搜索框-->
			<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
	<script type="text/javascript">
        function searchToggle(obj, evt){
            var container = $(obj).closest('.search-wrapper');

            if(!container.hasClass('active')){
                  container.addClass('active');
                  evt.preventDefault();
            }
            else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
                  container.removeClass('active');
                  // clear input
                  container.find('.search-input').val('');
                  // clear and hide result container when we press close
                  container.find('.result-container').fadeOut(100, function(){$(this).empty();});
            }
        }

        function submitFn(obj, evt){
            value = $(obj).find('.search-input').val().trim();

            _html = "Yup yup! Your search text sounds like this: ";
            if(!value.length){
                _html = "Yup yup! Add some text friend :D";
            }
            else{
                _html += "<b>" + value + "</b>";
            }

            $(obj).find('.result-container').html('<span>' + _html + '</span>');
            $(obj).find('.result-container').fadeIn(100);

            evt.preventDefault();
        }
    </script>
			<!--end搜索框-->
			
			
			
	</head>
	<body>
		
	
		
<div class="comma">
    <div class="zhengti" >
    	<!--左边的tab栏-->
        <div class="arcile">
           	<div id="" class="welcome">
           		<h3>欢迎用户登录！</h3>
           	</div>
           	
            <div class="info-meu">
                <ul>
                    <li >
                        <a href="user.html" class="baga">毕业生信息与人才检索</a>
                    </li>
                    <li >
                        <a href="user2.html" class="baga">企业信息</a>
                    </li>
                    <li>
                        <a href="user3.html" class="baga">企业信息需求</a>
                    </li>
                    <li >
                        <a href="user4.html" class="baga">求取信息统计分析</a>
                    </li>
                    <li>
                        <a href="user5.html" class="baga">数据备份</a>
                    </li>
                </ul>
            </div>
        </div>
        <!--end左边的tab栏-->
        
        <!--右边的对应内容-->
        <div class="juti">
            <div class="panal" style="display: block;">
		        <div class="content">
		        	<center>
		        		<h3 style="font-size: 30px;">数据备份</h3>
		        		
		        		<div id="" class="button" style="margin-top: 100px;">
                		<button style="width: 100px;height: 60px;">备份</button>
                 		<button style="width: 100px;height: 60px;">恢复</button>
                	</div>
					</center>
                </div>
            </div>
        </div>
    </div>
	<!--END右边的对应内容-->
</div>
		
		
	</body>
</html>
